<script setup>
import { ref, computed, onMounted, defineProps } from "vue";
import { expectedlist, purchaselist, balanceSelect } from "@/services/reward";
import {
  onShow,
  onPullDownRefresh,
  onReachBottom,
  onLoad,
} from "@dcloudio/uni-app";
import { formatPrice } from "@/utils/formatPrice";

const changeList = ref([]);
const status = ref("more");
const pages = ref({
  page: 1,
  limit: 20,
});
const isdatelist = ref(true);

const list1 = ref([
  { name: "预估收益明细", value: 1 },
  { name: "级差收益明细", value: 2 },
]);

const upgradeshow = ref(false);
// const list2 = ref([
//   { name: "全部", value: 0 },
//   { name: "收入", value: 1 },
//   { name: "支出", value: 2 },
// ]);

//下拉触底
onReachBottom(() => {
  // 触发下拉触底时执行的操作
  getChangeList(date.value);
});

// 减少的金额
const reduce = ref(0);
// 增加的金额
const add = ref(0);

const type = ref(0);
onLoad((e) => {
  //   settletypefun(selectonetop.value);
  getChangeList(date.value);
});
const selectonetop = ref(1);
const selecttwotop = ref(0);
const selecttwotopname = ref("");
const numobj = ref({});
// 基本案列数据
const radiolist1 = ref([
  {
    name: "苹果",
    disabled: false,
  },
]);
const select_type = ref(0);

const clickonefun = (item, index) => {
  changeList.value = [];
  pages.value.page = 1;
  isdatelist.value = true;
  selectonetop.value = item.value;
  getChangeList(date.value);
  //   settletypefun(selectonetop.value, 1);
};

// const clicktwofun = (item, index) => {
//   isdatelist.value = true;
//   pages.value.page = 1;
//   changeList.value = [];
//   selecttwotop.value = index;
//   selecttwotopname.value = list2.value[selecttwotop.value].value;
//   // settletypefun(index,2);
//   getChangeList(date.value);
// };
// 获取余额变更记录
const getChangeList = async (date = "") => {
  if (!isdatelist.value) return;
  let res = null;
  let dates = {
    // date,
    // type: selectonetop.value,
    // type_class: selecttwotopname.value,
    ...pages.value,
  };
  status.value = "loading";
  if (selectonetop.value == 1) {
    res = await expectedlist(dates);
  } else {
    res = await purchaselist(dates);
  }

  let arr = [];
  arr = res.data.list;

  changeList.value = changeList.value.concat(arr);
  numobj.value = res.data.sum;
  if (res.data.list.length < pages.value.limit) {
    isdatelist.value = false;
    status.value = "no-more";
  } else {
    isdatelist.value = true;
    status.value = "more";
  }
  pages.value.page++;
};

// 方法
function bindDateChange(e) {
  isdatelist.value = true;
  pages.value.page = 1;
  changeList.value = [];
  date.value = e.detail.value;
  getChangeList(date.value);
}

const selectNumId = ref(0);

// 跳转余额变动
const gotoBalance = (id, type, item) => {
  if (item.is_select && item.is_select == 1) {
    radiolist1.value = item.select;
    select_type.value = item.select[0].value;
    upgradeshow.value = true;
    selectNumId.value = id;
    return;
  }
  uni.navigateTo({
    url: `/pages/servicereward/myreward/rewardygdet?id=${id}&type=${type}`,
  });
};
const groupChange = (n) => {
  console.log("groupChange", n);
};

const radioChange = (n) => {
  console.log("radioChange", n);
};
const date = ref(null);
// 日期选择器
const currentDate = getDate({
  format: true,
});

date.value = getDate({
  format: true,
});

const startDate = ref(null);
const endDate = ref(null);

startDate.value = getDate("start");
endDate.value = getDate({
  format: true,
});

function getDate(type) {
  const date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  // let day = date.getDate();

  if (type === "start") {
    year = year - 60;
  } else if (type === "end") {
    year = year;
  }
  month = month > 9 ? month : "0" + month;
  // day = day > 9 ? day : '0' + day;
  return `${year}-${month}`;
}

const getSelectFun = async () => {
  try {
    let res = await balanceSelect({
      select_type: select_type.value,
      id: selectNumId.value,
    });
    if (res.code == 200) {
      uni.$u.toast("操作成功");
      upgradeshow.value = false;
      isdatelist.value = false;
      pages.value.page = 1;
      getChangeList(date.value);
    } else {
      uni.$u.toast(res.info);
    }
  } catch (e) {
    uni.$u.toast(e.info);
  }
};

const DateSwitching = (Data, formString, type) => {
  let newdate = "";
  if (type == 1) {
    newdate = Data.split(formString);

    return newdate[0] + "年";
  }
  if (type == 2) {
    newdate = Data.split(formString);

    return newdate[0] + "年" + newdate[1] + "月";
  }
  if (type == 3) {
    newdate = Data.split(formString);

    return newdate[0] + "年" + newdate[1] + "月" + newdate[2] + "日";
  }
};
const gotjfun = () => {
  uni.navigateTo({
    url: "/pages/servicereward/myreward/count",
  });
};

const filterfun = (arr) => {
  return arr.filter(function (item) {
    return item.stage_reward > 0;
  });
};
</script>
<template>
  <view class="changeRecord">
    <!-- <view class="changeRecord-top">
      <view class="changeRecord-top-tabs"
        ><up-tabs
          :activeStyle="{
            color: '#F3498B ',
            fontSize: '28rpx',
            fontWeight: 'bold',
          }"
          :inactiveStyle="{
            color: '#000000',
            fontWeight: 'bold',
            fontSize: '28rpx',
          }"
          lineColor="#F3498B "
          itemStyle="padding-left: 90rpx; padding-right: 90rpx; height: 34px;"
          :list="list1"
          @click="clickonefun"
        ></up-tabs
      ></view>
    </view> -->

    <view
      class="record-card"
      v-show="selectonetop == 1 && changeList && changeList.length > 0"
    >
      <!-- <view class="record-card-top">
        <view class="record-card-top-right">
          <text class="one"
            >增加{{
              numobj && numobj.add_balance ? numobj.add_balance : 0
            }}</text
          >
          <text class="two"
            >减少{{
              numobj && numobj.down_balance ? numobj.down_balance : 0
            }}</text
          >
        </view>
        <view class="record-card-top-left">
          <picker
            mode="date"
            :value="date"
            :start="startDate"
            fields="month"
            :end="endDate"
            @change="bindDateChange"
          >
            <view class="uni-input">
              <text>{{ DateSwitching(date, "-", 2) }}</text>
              <image
                src="@/pages/servicereward/static/reward/icons_ach_more.png"
                mode="scaleToFill"
            /></view>
          </picker>
        </view>
      </view> -->
      <view class="record-card-hel" style="height: 20rpx; width: 100%"></view>
      <view class="record-card-bottom">
        <view
          class="record-card-list"
          v-for="(itemone, index) in changeList"
          :key="index"
          @click="gotoBalance(itemone.id, 1, itemone)"
        >
          <view class="record-card-list-top">
            <view class="record-card-item-left"
              >{{ itemone.type_text }}
              <text class="record-card-balance"
                >收益来源({{
                  itemone.fromUser && itemone.fromUser.phone
                    ? itemone.fromUser.phone
                    : "---"
                }})</text
              >
            </view>
            <view
              class="record-card-item-right"
              :class="true ? 'yellor-test' : ''"
            >
              <text>{{ formatPrice(itemone.money) }}</text></view
            >
          </view>
          <view class="record-card-list-bottom">
            <view class="record-card-time">{{ itemone.create_time }}</view>
            <view class="record-card-balance" v-if="itemone.is_select == 1"
              >待领取</view
            >
            <view class="record-card-balance" v-if="itemone.is_select == 2"
              >待发放</view
            >
          </view>
        </view>
      </view>
    </view>

    <view
      class="record-card"
      v-show="selectonetop == 2 && changeList && changeList.length > 0"
    >
      <view class="record-card-bottom">
        <view
          class="record-card-list"
          v-for="(itemone, index) in filterfun(changeList)"
          :key="index"
          @click="gotoBalance(itemone.order_id, 2, itemone)"
        >
          <view class="record-card-list-top">
            <view class="record-card-item-left">
              订单编号{{
                itemone.relation_id
                  ? itemone.relation_id
                  : itemone.order_id
                  ? itemone.order_id
                  : "---"
              }}
            </view>
            <view
              class="record-card-item-right"
              :class="true ? 'yellor-test' : ''"
            >
              <text> {{ formatPrice(itemone.stage_reward) }}</text></view
            >
          </view>
          <view class="record-card-list-bottom">
            <view class="record-card-time">{{ itemone.pay_time }} </view>
            <view class="record-card-balance"
              >收益来源({{
                itemone.buyer && itemone.buyer.phone
                  ? itemone.buyer.phone
                  : "---"
              }})</view
            >
          </view>
        </view>
      </view>
    </view>

    <view class="record-card" v-if="changeList && changeList.length === 0">
      <!-- <view class="record-card-top">
        <view class="record-card-top-right">
          <text class="one">增加0</text>
          <text class="two">减少0</text>
        </view>
        <view class="record-card-top-left">
          <picker
            mode="date"
            :value="date"
            :start="startDate"
            fields="month"
            :end="endDate"
            @change="bindDateChange"
          >
            <view class="uni-input"
              ><text>{{ DateSwitching(date, "-", 2) }}</text
              ><image
                src="@/pages/servicereward/static/reward/icons_ach_more.png"
                mode="scaleToFill"
            /></view>
          </picker>
        </view>
      </view> -->
    </view>
    <view class="nodate-bt" v-if="changeList.length === 0">
      <image src="/static/nodate/nodate.png" mode="widthFix"></image>
    </view>
    <uni-load-more color="#c6c5c3" :status="status" />
  </view>

  <up-popup
    :show="upgradeshow"
    mode="center"
    round="10"
    @close="close"
    @open="open"
  >
    <view class="popup-content">
      <view class="popup-content-title"
        >管理奖励二选一，领取后不可更换，请确认</view
      >
      <view class="popup-content-dec"
        ><up-radio-group
          v-model="select_type"
          placement="column"
          @change="groupChange"
        >
          <up-radio
            :customStyle="{ marginBottom: '8px' }"
            v-for="(item, index) in radiolist1"
            :key="index"
            :label="item.option"
            :name="item.value"
            @change="radioChange"
          >
          </up-radio> </up-radio-group
      ></view>
      <view class="popup-content-bt">
        <view class="popup-content-qx" @click="upgradeshow = false"
          >我想想</view
        >
        <view class="popup-content-cl" @click="getSelectFun">确认选择</view>
      </view>
    </view>
  </up-popup>
</template>
<style lang="scss" scoped>
@import "rewardyg.scss";
</style>
